<template>
  <el-drawer title="角色权限配置" :visible.sync="drawerShow" direction="rtl" >
    <el-tree :data="menuOptions" show-checkbox node-key="id" :props="defaultProps" ref="tree"
             :default-expanded-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"/>
    <div style="text-align: center;margin-top: 20px;">
      <el-button size="small" @click="drawerShow = false">取消</el-button>
      <el-button type="primary" size="small" @click="getCheckedKeys">保存</el-button>
    </div>

  </el-drawer>
</template>

<script>

import { treeRoleAccessApi,getAccessIdsByRoleApi } from '@/api/system/sysMenu'

export default {
  name: 'SysAccessDrawer',
  data(){
    return {
      rowData:{},
      drawerShow:false,
      menuOptions:[],
      defaultCheckedKeys:[],
      defaultProps: { children: 'children', label: 'accessName' }
    }
  },
  methods:{
    opened(row){
      this.rowData = row;
      this.loadTreeMenu();
      this.drawerShow = true;
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    loadTreeMenu(){
      getAccessIdsByRoleApi({roleId: this.rowData.id}).then(res => {
        this.defaultCheckedKeys = res.data
      })
      treeRoleAccessApi(0).then(res => {
        this.menuOptions = res.data;
      })
    },
  }
}
</script>

<style scoped>

</style>
